<template>
  <div id="app" class="building">
    <!-- 左上切换 -->
    <button
      :class="number < 3 ? 'left-tab-buttons' : 'left-tab-button'"
      @click="tab(0)"
    >
      系统日志
    </button>
    <button
      :class="number >= 3 ? 'right-tab-buttons' : 'right-tab-button'"
      @click="tab(3)"
    >
      用户管理
    </button>
    <div class="backgroud-box">
      <!-- 系统日志 -->
      <div v-show="number == 0">
        <!-- 搜索栏 -->
        <div class="searchWrap">
          <div class="searchBox">
            <div class="searchIcon">
              <img
                src="@/assets/image/manage/search.png"
                style="height: 30px; width: 30px"
                alt=""
              />
            </div>
            <input
              type="text"
              class="input-search"
              v-model="keyword1"
              id="searchTxt"
              ref="searchTxt"
              placeholder="输入文档名或文档id或上传日期或上传人姓名"
              filterable
              value=""
              @keyup.enter="searchFile"
            />
          </div>
          <span
            style="
              height: 28px;
              position: absolute;
              border: 1px solid rgb(168, 168, 168);
              margin: 5px 350px;
            "
          ></span>
          <!-- 搜索按钮 -->
          <el-button type="text" @click="searchFile" class="searchButton"
            >搜索</el-button
          >
        </div>
        <!-- 表格 -->
        <div class="fileTable">
          <el-table
            :data="
              fileData.slice(
                (currentPage1 - 1) * pageSize,
                currentPage1 * pageSize
              )
            "
            @sort-change="sortChange"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="fileName"
              label="文档名"
              align="center"
              width="150"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="fileId"
              label="文档ID"
              align="center"
              width="150"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="browseNum"
              label="总浏览次数"
              align="center"
              sortable="custom"
              width="150"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="downloadNum"
              label="总下载次数"
              align="center"
              sortable="custom"
              width="150"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="createName"
              label="上传人"
              align="center"
              width="150"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="上传日期"
              align="center"
              sortable="custom"
              width="150"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column label="">
              <!-- 点击详情跳转 -->
              <template slot-scope="scope">
                <el-button
                  @click="onFileDetails(scope.$index, fileData)"
                  type="text"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination
          background
          prev-text="<上一页"
          next-text="下一页>"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange1"
          :current-page="currentPage1"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="fileData.length"
        >
        </el-pagination>
      </div>
      <!-- 详情页 -->
      <div v-show="number == 1">
        <!-- 详情切换头部 -->
        <div v-show="isHidden == 0" class="selectboxTitle">
          <span class="font-css">筛选</span>
          <img
            :src="require('@/assets/image/manage/' + img + '.png')"
            id="up-icon"
            style="width: 40px; height: 40px; float: right"
            @click="imgClick"
            alt=""
          />
        </div>
        <!-- 详情切换主体 -->
        <div id="radioBox" v-show="isHidden == 0" class="selectboxBody">
          <el-radio-group v-model="number1" @change="getDetailsData">
            <el-radio :label="0">浏览日志</el-radio>
            <el-radio :label="1">下载日志</el-radio>
          </el-radio-group>
        </div>
        <!-- 浏览详情 -->
        <div v-show="number1 == 0" class="browseBody">
          <div style="display: flex">
            <!-- 浏览详情表格 -->
            <table class="t">
              <tr>
                <th>文档名</th>
                <th>文档id</th>
                <th>上传人</th>
                <th>隶属部门</th>
                <th>部门负责人</th>
                <th>上传时间</th>
              </tr>
              <tr>
                <el-tooltip :content="detailsData.fileName" placement="top">
                  <td>
                    {{ detailsData.fileName }}
                  </td>
                </el-tooltip>
                <td>{{ detailsData.fileId }}</td>
                <td>{{ detailsData.createName }}</td>
                <td>{{ detailsData.deptName }}</td>
                <td>{{ detailsData.leaderName }}</td>
                <td>{{ detailsData.createTime }}</td>
              </tr>
              <tr>
                <th>文档属性</th>
                <th>浏览总次数</th>
                <th>今日浏览次数</th>
                <th>7日内浏览次数</th>
                <th>30日内浏览次数</th>
                <th>下架时间</th>
              </tr>
              <tr>
                <td>
                  <span v-if="detailsData.fileType == 0">私有</span>
                  <span v-if="detailsData.fileType == 1">公开(所有人可见)</span>
                  <span v-if="detailsData.fileType == 2">公开(仅部分可见)</span>
                  <span v-if="detailsData.fileType == -1">已下架</span>
                </td>
                <td>{{ detailsData.browseNum }}</td>
                <td>{{ detailsData.browseNum1 }}</td>
                <td>{{ detailsData.browseNum7 }}</td>
                <td>{{ detailsData.browseNum30 }}</td>
                <td>{{ detailsData.abandonTime }}</td>
              </tr>
            </table>
            <!-- 下架按钮 -->
            <el-button
              type="text"
              @click="deleteDetails"
              v-show="detailsData.abandonReason != null"
              style="position: absolute; margin-top: 115px; margin-left: 810px"
              >详情</el-button
            >
            <el-button
              class="delete-button"
              type="danger"
              v-show="detailsData.abandonReason == null"
              @click="deleteVisible = true"
              >下架文档</el-button
            >
          </div>
          <!-- 浏览人表格 -->
          <div class="fileTable1" v-show="isHidden == 0">
            <el-table
              :data="
                detailsData2.slice(
                  (currentPage2 - 1) * pageSize,
                  currentPage2 * pageSize
                )
              "
              @sort-change="sortChange1"
              stripe
              style="width: 100%"
            >
              <el-table-column
                prop="name"
                label="浏览人"
                align="center"
                width="150"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="dept"
                label="隶属部门"
                align="center"
                width="150"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="leader"
                label="部门负责人"
                align="center"
                width="150"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="time"
                label="浏览时间"
                align="center"
                sortable="custom"
                width="150"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
            </el-table>
          </div>
          <!-- 搜索栏 -->
          <div class="searchWrap1" v-show="isHidden == 0">
            <div class="searchBox1">
              <div class="searchIcon">
                <img
                  src="@/assets/image/manage/search.png"
                  style="height: 30px; width: 30px"
                  alt=""
                />
              </div>
              <input
                type="text"
                class="input-search"
                v-model="keyword2"
                id="searchTxt"
                ref="searchTxt"
                placeholder="输入人名、部门或时间"
                filterable
                value=""
                @keyup.enter="searchBrowse"
              />
            </div>
            <span
              style="
                height: 28px;
                position: absolute;
                border: 1px solid rgb(168, 168, 168);
                margin: 5px 300px;
              "
            ></span>
            <!-- 搜索按钮 -->
            <el-button type="text" @click="searchBrowse" class="searchButton1"
              >搜索</el-button
            >
          </div>
          <!-- 分页 -->
          <div class="my-pagination" v-show="isHidden == 0">
            <el-pagination
              prev-text="上一页"
              next-text="下一页"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange2"
              :current-page="currentPage2"
              :page-size="pageSize"
              layout="prev, next"
              :total="detailsData2.length"
            >
            </el-pagination>
          </div>
        </div>
        <!-- 下载详情 -->
        <div v-show="number1 == 1" class="downloadBody">
          <div style="display: flex">
            <!-- 下载详情表格 -->
            <table class="t">
              <tr>
                <th>文档名</th>
                <th>文档id</th>
                <th>上传人</th>
                <th>隶属部门</th>
                <th>部门负责人</th>
                <th>上传时间</th>
              </tr>
              <tr>
                <el-tooltip :content="detailsData.fileName" placement="top">
                  <td>
                    {{ detailsData.fileName }}
                  </td>
                </el-tooltip>
                <td>{{ detailsData.fileId }}</td>
                <td>{{ detailsData.createName }}</td>
                <td>{{ detailsData.deptName }}</td>
                <td>{{ detailsData.leaderName }}</td>
                <td>{{ detailsData.createTime }}</td>
              </tr>
              <tr>
                <th>文档属性</th>
                <th>下载总次数</th>
                <th>今日下载次数</th>
                <th>7日内下载次数</th>
                <th>30日内下载次数</th>
                <th>下架时间</th>
              </tr>
              <tr>
                <td>
                  <span v-if="detailsData.fileType == 0">私有</span>
                  <span v-if="detailsData.fileType == 1">公开(所有人可见)</span>
                  <span v-if="detailsData.fileType == 2">公开(仅部分可见)</span>
                  <span v-if="detailsData.fileType == -1">已下架</span>
                </td>
                <td>{{ detailsData.downloadNum }}</td>
                <td>{{ detailsData.downloadNum1 }}</td>
                <td>{{ detailsData.downloadNum7 }}</td>
                <td>{{ detailsData.downloadNum30 }}</td>
                <td>{{ detailsData.abandonTime }}</td>
              </tr>
            </table>
            <!-- 下架按钮 -->
            <el-button
              type="text"
              @click="deleteDetails"
              v-show="detailsData.abandonReason != null"
              style="position: absolute; margin-top: 115px; margin-left: 810px"
              >详情</el-button
            >
            <el-button
              type="danger"
              v-show="detailsData.abandonReason == null"
              class="delete-button"
              @click="deleteVisible = true"
              >下架文档</el-button
            >
          </div>
          <!-- 下载人表格 -->
          <div class="fileTable1" v-show="isHidden == 0">
            <el-table
              :data="
                detailsData3.slice(
                  (currentPage3 - 1) * pageSize,
                  currentPage3 * pageSize
                )
              "
              @sort-change="sortChange3"
              stripe
              style="width: 100%"
            >
              <el-table-column
                prop="name"
                label="下载人"
                align="center"
                width="150"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="dept"
                label="隶属部门"
                align="center"
                width="150"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="leader"
                label="部门负责人"
                align="center"
                width="150"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="time"
                label="下载时间"
                align="center"
                sortable="custom"
                width="150"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
            </el-table>
          </div>
          <!-- 搜索栏 -->
          <div class="searchWrap1" v-show="isHidden == 0">
            <div class="searchBox1">
              <div class="searchIcon">
                <img
                  src="@/assets/image/manage/search.png"
                  style="height: 30px; width: 30px"
                  alt=""
                />
              </div>
              <input
                type="text"
                class="input-search"
                v-model="keyword3"
                id="searchTxt"
                ref="searchTxt"
                placeholder="输入人名、部门或时间"
                filterable
                value=""
                @keyup.enter="searchDownload"
              />
            </div>
            <span
              style="
                height: 28px;
                position: absolute;
                border: 1px solid rgb(168, 168, 168);
                margin: 5px 300px;
              "
            ></span>
            <!-- 搜索按钮 -->
            <el-button type="text" @click="searchDownload" class="searchButton1"
              >搜索</el-button
            >
          </div>
          <!-- 分页 -->
          <div class="my-pagination" v-show="isHidden == 0">
            <el-pagination
              prev-text="上一页"
              next-text="下一页"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange3"
              :current-page="currentPage3"
              :page-size="pageSize"
              layout="prev, next"
              :total="detailsData3.length"
            >
            </el-pagination>
          </div>
        </div>
        <!-- 下架对话框 -->
        <el-dialog
          class="deleteFile"
          :visible.sync="deleteVisible"
          :show-close="false"
          :modal-append-to-body="false"
        >
          <img src="@/assets/image/manage/warn.png" /><br /><br />
          <p style="font-size: 25px; font-weight: bolder; color: black">
            您确认要下架该文档吗?
          </p>
          <p
            style="
              font-size: 25px;
              font-weight: bolder;
              color: black;
              float: left;
              margin-left: 150px;
              margin-top: 70px;
            "
          >
            下架原因:
          </p>
          <div
            style="
              width: 550px;
              float: middle;
              margin: auto;
              position: absolute;
              left: 0;
              right: 0;
              margin-top: 140px;
            "
          >
            <el-input type="textarea" :rows="6" v-model="abandonReason">
            </el-input>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              @click="deleteF"
              class="btn-confirm-delete"
              >确 定</el-button
            >
            <el-button
              type="warning"
              @click="deleteVisible = false"
              class="btn-cancel-delete"
              >取 消</el-button
            >
          </span>
        </el-dialog>
        <!-- 下架详情 -->
        <div
          v-show="isHidden == 1"
          style="
            position: absolute;
            margin-left: 250px;
            margin-top: 270px;
            width: 700px;
            height: 150px;
          "
        >
          <table class="t1">
            <tr>
              <th>下架操作人</th>
              <th>隶属部门</th>
              <th>下架原因</th>
            </tr>
            <tr>
              <td>{{ detailsData.abandonName }}</td>
              <td>{{ detailsData.abandonDept }}</td>
              <td style="width: 350px">
                {{ detailsData.abandonReason }}
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!-- 用户管理 -->
      <div v-show="number == 3">
        <!-- 搜索栏 -->
        <div class="searchWrap">
          <div class="searchBox">
            <div class="searchIcon">
              <img
                src="@/assets/image/manage/search.png"
                style="height: 30px; width: 30px"
                alt=""
              />
            </div>
            <input
              type="text"
              class="input-search"
              v-model="keyword4"
              id="searchTxt"
              ref="searchTxt"
              placeholder="输入姓名或部门"
              filterable
              @keyup.enter="searchUser"
              value=""
            />
          </div>
          <span
            style="
              height: 28px;
              position: absolute;
              border: 1px solid rgb(168, 168, 168);
              margin: 5px 350px;
            "
          ></span>
          <!-- 搜索按钮 -->
          <el-button type="text" @click="searchUser" class="searchButton"
            >搜索</el-button
          >
        </div>
        <!-- 表格 -->
        <div class="fileTable">
          <el-table
            :data="
              userData.slice(
                (currentPage4 - 1) * pageSize,
                currentPage4 * pageSize
              )
            "
            @sort-change="sortChange2"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="userName"
              label="姓名"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="userId"
              label="工号"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="deptName"
              label="隶属部门"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="leaderName"
              label="负责人"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="accessTime"
              label="访问小时数"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="注册时间"
              align="center"
              sortable="custom"
              width="150"
            >
            </el-table-column>
            <el-table-column label="">
              <!-- 点击详情跳转 -->
              <template slot-scope="scope">
                <el-button
                  @click="onUserDetails(scope.$index, userData)"
                  type="text"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 审批按钮跳转 -->
        <div style="position: absolute; right: 12%; top: 24%">
          <el-button
            type="primary"
            icon="el-icon-my-message"
            @click="tab(5)"
            style="background-color: rgba(22, 155, 213, 1)"
            >注册账号审批</el-button
          ><br /><br />
          <el-button
            type="warning"
            icon="el-icon-my-message"
            @click="tab(6)"
            style="background-color: #ffb354"
            >重置密码审批</el-button
          >
        </div>
        <!-- 分页 -->
        <el-pagination
          background
          prev-text="<上一页"
          next-text="下一页>"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange4"
          :current-page="currentPage4"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="userData.length"
        >
        </el-pagination>
      </div>
      <!-- 用户详情 -->
      <div v-show="number == 4">
        <!-- 表格 -->
        <div style="width: 1100px; margin: auto; margin-top: 80px">
          <table class="t1">
            <tr>
              <th>姓名</th>
              <th>工号</th>
              <th>隶属部门</th>
              <th>部门负责人</th>
              <th>手机号码</th>
              <th>注册时间</th>
              <th>访问时长</th>
            </tr>
            <tr>
              <td>{{ detailsData1.userName }}</td>
              <td>{{ detailsData1.userId }}</td>
              <td>{{ detailsData1.deptName }}</td>
              <td>{{ detailsData1.leaderName }}</td>
              <td>{{ detailsData1.phonenumber }}</td>
              <td>{{ detailsData1.createTime }}</td>
              <td>{{ detailsData1.accessTime }}</td>
            </tr>
          </table>
          <br /><br />
          <table class="t1">
            <tr>
              <th>性别</th>
              <th>出生日期</th>
              <th>账号昵称</th>
              <th>邮箱</th>
              <th>最后访问时间</th>
              <th>最后访问IP属地</th>
              <th>账号职级</th>
            </tr>
            <tr>
              <td>{{ detailsData1.sex }}</td>
              <td>{{ detailsData1.birthday }}</td>
              <td>{{ detailsData1.nickName }}</td>
              <td>{{ detailsData1.email }}</td>
              <td>{{ detailsData1.loginDate }}</td>
              <td>{{ detailsData1.loginIp }}</td>
              <td>
                <span v-if="detailsData1.userType == -1">离职</span>
                <span v-if="detailsData1.userType == 0">游客</span>
                <span v-if="detailsData1.userType == 1">员工</span>
                <span v-if="detailsData1.userType == 2">部门负责人</span>
                <span v-if="detailsData1.userType == 3">超级管理员</span>
              </td>
            </tr>
          </table>
        </div>
        <!-- 三按钮 -->
        <div
          style="display: flex; justify-content: space-around; margin-top: 50px"
        >
          <el-button
            class="unsubscribe-btn"
            type="danger"
            @click="showUnsubscribeBox"
            >注销账号</el-button
          >
          <el-button class="reset-btn" type="warning" @click="showResetBox"
            >重置密码</el-button
          >
          <el-button
            class="change-btn"
            type="success"
            @click="changeVisible = true"
            >更改账号职级权限</el-button
          >
        </div>
        <!-- 更改账号职级权限 -->
        <el-dialog
          :visible.sync="changeVisible"
          :show-close="false"
          :modal-append-to-body="false"
          class="changeType"
          ><br /><br /><br />
          <div class="selectBox-change">
            部门:
            <el-select v-model="value1">
              <el-option
                v-for="item in deptSelect"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <br /><br /><br /><br /><br />
          <div class="selectBox-change">
            职级:
            <el-select v-model="value2">
              <el-option
                v-for="item in rankSelect"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              @click="changeRank"
              class="btn-confirm-change"
              >确 定</el-button
            >
            <el-button
              type="warning"
              @click="changeVisible = false"
              class="btn-cancel-change"
              >取 消</el-button
            >
          </span>
        </el-dialog>
      </div>
      <!-- 注册账号审批 -->
      <div v-show="number == 5">
        <p
          style="
            width: 200px;
            font-size: 28px;
            font-weight: bold;
            margin-left: 100px;
            margin-top: 30px;
            padding-bottom: 15px;
          "
        >
          注册账号审批
        </p>
        <div class="fileTable2">
          <el-table
            :data="
              createData.slice(
                (currentPage5 - 1) * pageSize,
                currentPage5 * pageSize
              )
            "
            @sort-change="sortChange4"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="userName"
              label="姓名"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="userId"
              label="工号"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="deptName"
              label="隶属部门"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="leaderName"
              label="负责人"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="phonenumber"
              label="电话"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="注册时间"
              align="center"
              sortable="custom"
              width="150"
            >
            </el-table-column>
            <el-table-column label="">
              <!-- 点击详情跳转 -->
              <template slot-scope="scope">
                <el-button
                  @click="showPassCreateApproval(scope.$index, createData)"
                  type="text"
                  >审核通过</el-button
                >
                <el-button
                  @click="showRejectCreateApproval(scope.$index, createData)"
                  style="color: red"
                  type="text"
                  >驳回</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination
          background
          prev-text="<上一页"
          next-text="下一页>"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange5"
          :current-page="currentPage5"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="createData.length"
        >
        </el-pagination>
      </div>
      <!-- 重置密码审批 -->
      <div v-show="number == 6">
        <p
          style="
            width: 200px;
            font-size: 28px;
            font-weight: bold;
            margin-left: 100px;
            margin-top: 30px;
            padding-bottom: 15px;
          "
        >
          重置密码审批
        </p>
        <div class="fileTable2">
          <el-table
            :data="
              resetData.slice(
                (currentPage6 - 1) * pageSize,
                currentPage6 * pageSize
              )
            "
            @sort-change="sortChange5"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="user.userName"
              label="姓名"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="user.userId"
              label="工号"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="user.deptName"
              label="隶属部门"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="user.leaderName"
              label="负责人"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="user.phonenumber"
              label="电话"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="重置密码申请时间"
              align="center"
              sortable="custom"
              width="180"
            >
            </el-table-column>
            <el-table-column label="">
              <!-- 点击详情跳转 -->
              <template slot-scope="scope">
                <el-button
                  @click="resetClick(scope.$index, resetData)"
                  type="text"
                  >一键重置密码</el-button
                >
                <el-button
                  @click="showRejectResetApproval(scope.$index, resetData)"
                  style="color: red"
                  type="text"
                  >驳回</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination
          background
          prev-text="<上一页"
          next-text="下一页>"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange6"
          :current-page="currentPage6"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="resetData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getUserData,
  getCreateData,
  getResetData,
  searchUserData,
  deleteUser,
  onlyResetPwd,
  passResetPwd,
  rejectResetPwd,
  modifyUserType,
  approveRegister,
} from "@/api/manage/userManage";
import {
  deleteFile,
  getFileData,
  getFileBrowseList,
  getFileDownloadList,
  searchFileData,
  searchDownloadData,
  searchBrowseData,
} from "@/api/manage/fileLog";
import axios from "axios";
export default {
  inject: ["reload"],
  data() {
    return {
      img: "down",
      keyword1: "",
      keyword2: "",
      keyword3: "",
      keyword4: "",
      userId: this.$store.getters.userId,
      userName: this.$store.getters.userName,
      dept: this.$store.getters.userDept,
      number: 0, //点击后的值，与下标同步，为0表示默认第一个按钮与div为选中状态
      number1: 0,
      isHidden: 0,
      getTime: "",
      abandonReason: null,
      deleteVisible: false,
      changeVisible: false,
      // 当前页
      currentPage1: 1,
      currentPage2: 1,
      currentPage3: 1,
      currentPage4: 1,
      currentPage5: 1,
      currentPage6: 1,
      // 每页多少条
      pageSize: 5,
      //下拉选择
      rankSelect: [
        {
          value: "游客",
          label: "游客",
        },
        {
          value: "员工",
          label: "员工",
        },
        {
          value: "部门负责人",
          label: "部门负责人",
        },
      ],
      deptSelect: [
        {
          value: "数据管理事业部",
          label: "数据管理事业部",
        },
        {
          value: "数据运营事业部",
          label: "数据运营事业部",
        },
        {
          value: "企业管理事业部",
          label: "企业管理事业部",
        },
        {
          value: "部门1",
          label: "部门1",
        },
        {
          value: "部门2",
          label: "部门2",
        },
        {
          value: "部门3",
          label: "部门3",
        },
        {
          value: "部门4",
          label: "部门4",
        },
        {
          value: "总部",
          label: "总部",
        },
      ],
      value1: "",
      value2: "",
      fileId: 1,
      //详情点出来的单独数据
      detailsData: {
        fileId: "",
        abandonReason: null,
      },
      detailsData1: {
        userId: 1,
        deptName: "",
        userName: "",
      },
      detailsData2: [
        {
          userId: 1,
          name: "王五",
          dept: "xxx部门",
          leader: "白某",
          time: "2021-7-20  18:06:13",
        },
      ],
      detailsData3: [
        {
          userId: 1,
          name: "王五",
          dept: "xxx部门",
          leader: "白某",
          time: "2021-7-20  18:06:13",
        },
      ],
      //后端的数据
      resetData: [
        {
          user: {
            userName: "李四",
            userId: 138,
            deptId: 1,
            deptName: "xx部门",
            leaderName: "张三",
            phonenumber: "123-1234-1234",
            userType: 1,
          },
          createTime: "2021-7-11 16:34:32",
        },
      ],
      createData: [
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          createTime: "2021-7-11 16:34:32",
          phonenumber: "123-1234-1234",
        },
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          createTime: "2021-7-11 16:34:32",
          phonenumber: "123-1234-1234",
        },
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          createTime: "2021-7-11 16:34:32",
          phonenumber: "123-1234-1234",
        },
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          createTime: "2021-7-11 16:34:32",
          phonenumber: "123-1234-1234",
        },
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          createTime: "2021-7-11 16:34:32",
          phonenumber: "123-1234-1234",
        },
        {
          userName: "李四",
          userId: 138,
          deptName: "xx部门",
          leaderName: "张三",
          createTime: "2021-7-11 16:34:32",
          phonenumber: "123-1234-1234",
        },
      ],
      userData: [
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
        {
          userName: "李四",
          userId: 1218,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
        {
          userName: "李四",
          userId: 1213,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
        {
          userName: "李四",
          userId: 1138,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
        {
          userName: "李四",
          userId: 1238,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
        {
          userName: "李",
          userId: 128,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
      ],
      fileData: [
        {
          fileName:
            "xx报表xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
          fileId: "axd12138",
          browseNum: 165,
          downloadNum: 165,
          createName: "李四",
          deptName: "xx部门",
          leaderName: "张三",
          createTime: "2022-7-20 15:30:27",
          abandonTime: "2022-7-20 15:30:27",
          abandonReason: null,
        },
      ],
    };
  },
  created: function () {
    let data = {
      userId: this.userId,
    };
    axios
      .all([
        //这里是你请求的方法配置
        getUserData(data),
        getCreateData(data),
        getResetData(data),
        getFileData(),
      ])
      .then(
        axios.spread((res1, res2, res3, res4) => {
          //这里是返回的数据
          this.userData = res1.data;
          this.createData = res2.data;
          this.resetData = res3.data;
          this.fileData = res4.data;
          console.log(res1.data);
          console.log(res2.data);
          console.log(res3.data);
          console.log(res4.data);
        })
      )
      .catch((e) => {
        alert("获取数据失败");
        console.log(e);
      });
  },
  methods: {
    //下载详情 +-+
    getDetailsData(val) {
      if (val == 1) {
        // axios
        let data = {
          fileId: this.fileId,
        };
        getFileDownloadList(data)
          .then((res) => {
            let value = res.code;
            if (value == 200) {
              this.detailsData3 = res.data;
              this.number = 1;
              console.log("成功");
            } else console.log("失败");
          })
          .catch((e) => {
            this.$message({
              type: "error",
              message: "未获取到详情",
            });
            console.log(e);
          });
      }
    },
    //文档详情 +-+
    onFileDetails(index, rows) {
      index = (this.currentPage1 - 1) * this.pageSize + index;
      this.detailsData = rows[index];
      this.fileId = rows[index].fileId;
      let data = {
        fileId: this.fileId,
      };
      // axios
      getFileBrowseList(data)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.detailsData2 = res.data;
            this.number = 1;
            console.log("成功");
          } else console.log("失败");
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "未获取到详情",
          });
          console.log(e);
        });
      this.number = 1;
    },
    //用户详情
    onUserDetails(index, rows) {
      index = (this.currentPage4 - 1) * this.pageSize + index;
      this.detailsData1 = rows[index];
      this.number = 4;
    },
    change() {
      // 页面逻辑执行完毕后调用reload方法
      console.log("刷新");
      this.reload();
    },
    //改变职级 +-+ ✔
    changeRank() {
      this.getCurrentTime();
      let data = {
        userId: this.detailsData1.userId,
        deptName: this.value1,
        userType: this.value2,
        oprtId: this.userId,
        time: this.getTime,
      };
      let body = JSON.stringify(data);
      // axios
      modifyUserType(body)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.changeVisible = false;
            this.change();
            console.log("成功");
            this.$message({
              type: "success",
              message: "更改成功",
            });
          } else {
            this.$message({
              type: "error",
              message: "修改失败",
            });
          }
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "改变职级失败",
          });
          console.log(e);
        });
    },
    //搜索文档 +-+
    searchFile() {
      let data = {
        keyword: this.keyword1,
      };
      // axios
      searchFileData(data)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.fileData = res.data;
          }
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "搜索失败",
          });
          console.log(e);
        });
    },
    searchBrowse() {
      let data = {
        keyword: this.keyword2,
        fileId: this.fileId,
      };
      // axios
      searchBrowseData(data)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.detailsData2 = res.data;
          }
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "搜索失败",
          });
          console.log(e);
        });
    },
    searchDownload() {
      let data = {
        keyword: this.keyword3,
        fileId: this.fileId,
      };
      // axios
      searchDownloadData(data)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.detailsData3 = res.data;
          }
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "搜索失败",
          });
          console.log(e);
        });
    },
    //下架文档 +-+
    deleteF() {
      this.getCurrentTime();
      let data = {
        abandonId: this.userId,
        abandonTime: this.getTime,
        abandonReason: this.abandonReason,
        fileId: this.detailsData.fileId,
      };
      let body = JSON.stringify(data);
      // axios
      deleteFile(body)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.deleteVisible = false;
            alert("下架成功");
          }
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "下架文档失败",
          });
          console.log(e);
        });
      console.log("下架文档");
      this.change();
    },
    //搜索用户 +-+ ✔
    searchUser() {
      let data = {
        keyword: this.keyword4,
        userId: this.userId,
      };
      // axios
      searchUserData(data)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.userData = res.data;
          }
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "搜索失败",
          });
          console.log(e);
        });
    },
    //注销账号请求 +-+ ✔
    unsubscribe() {
      this.getCurrentTime();
      let data = {
        userId: this.detailsData1.userId,
        oprtId: this.userId,
        time: this.getTime,
      };
      let body = JSON.stringify(data);
      // axios
      deleteUser(body)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.number = 3;
            this.change();
            this.$message({
              type: "success",
              message: "注销成功",
            });
            console.log("成功");
          } else console.log("失败");
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "注销失败",
          });
          console.log(e);
        });
      console.log("提交注销请求");
      // this.number = 3;
    },
    //注销账号框
    async showUnsubscribeBox() {
      const url = require("@/assets/image/manage/warn.png");
      const confirmRes = await this.$confirm(
        "<img src=" +
          url +
          `><p style="margin-top:60px;">您确认要<span style="color:red">注销</span>
      ${this.detailsData1.deptName} ${this.detailsData1.userId}号<br>${this.detailsData1.userName}的ESDN账号吗？</p>`,
        "",
        {
          dangerouslyUseHTMLString: true,
          customClass: "messageBox-unsubscribe",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-cancel-unsubscribe",
          confirmButtonClass: "btn-confirm-unsubscribe",
          center: true,
          showClose: false,
          type: "warning",
        }
      ).catch((err) => err); //用catch来捕获错误消息
      if ("confirm" === confirmRes) {
        //用户点击了确认
        this.unsubscribe();
      }
    },
    //重置密码请求 +-+ ✔
    reset() {
      this.getCurrentTime();
      let data = {
        oprtId: this.userId,
        userId: this.detailsData1.userId,
        time: this.getTime,
      };
      let body = JSON.stringify(data);
      // axios
      onlyResetPwd(body)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.resetSuccess();
            console.log("成功");
            this.$message({
              type: "success",
              message: "重置密码成功",
            });
          } else console.log("失败");
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "重置密码失败",
          });
          console.log(e);
        });
      console.log("提交重置密码请求");
      //this.resetSuccess();
    },
    resetClick(index, rows) {
      index = (this.currentPage6 - 1) * this.pageSize + index;
      this.detailsData1 = rows[index];
      this.getCurrentTime();
      let data = {
        oprtId: this.userId,
        userId: this.detailsData1.userId,
        time: this.getTime,
      };
      let body = JSON.stringify(data);
      // axios
      passResetPwd(body)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.resetSuccess();
            console.log("成功");
            this.$message({
              type: "success",
              message: "重置密码成功",
            });
          } else console.log("失败");
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "重置密码失败",
          });
          console.log(e);
        });
      console.log("提交重置密码请求");
      //this.resetSuccess();
    },
    //重置密码成功
    async resetSuccess() {
      const confirmRes = await this.$alert(
        `<p>${this.detailsData1.deptName} 员工 ${this.detailsData1.userId}号 ${this.detailsData1.userName}账号密码重置成功！
      <br>初始密码为：<span style="font-weight:bold;">123456</span></p>`,
        "",
        {
          dangerouslyUseHTMLString: true,
          customClass: "messageBox-reset",
          confirmButtonText: "确定",
          confirmButtonClass: "btn-confirm-reset",
          center: true,
          showClose: false,
        }
      ).catch((err) => err); //用catch来捕获错误消息
      if ("confirm" === confirmRes) {
        //用户点击了确认
        this.change();
      }
    },
    //重置密码框
    async showResetBox() {
      const url = require("@/assets/image/manage/warn.png");
      const confirmRes = await this.$confirm(
        "<img src=" +
          url +
          `><p style="margin-top:60px;">您确定要将 
      ${this.detailsData1.deptName} ${this.detailsData1.userId}号 ${this.detailsData1.userName}<br><span style="color:red">重置密码</span>吗？</p>`,
        "",
        {
          dangerouslyUseHTMLString: true,
          customClass: "messageBox-unsubscribe",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-cancel-unsubscribe",
          confirmButtonClass: "btn-confirm-unsubscribe",
          center: true,
          showClose: false,
          type: "warning",
        }
      ).catch((err) => err); //用catch来捕获错误消息
      if ("confirm" === confirmRes) {
        //用户点击了确认
        this.reset();
      }
    },
    //注册账号审批通过
    async showPassCreateApproval(index, rows) {
      index = (this.currentPage5 - 1) * this.pageSize + index;
      this.detailsData1 = rows[index];
      const url = require("@/assets/image/manage/warn.png");
      const confirmRes = await this.$confirm(
        "<img src=" +
          url +
          `><p style="margin-top:60px;">您确认要<span style="color:#02A7F0">通过</span>${this.detailsData1.userId}号 ${this.detailsData1.userName}的部门认证申请吗？</p>`,
        "",
        {
          dangerouslyUseHTMLString: true,
          customClass: "messageBox-unsubscribe",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-cancel-unsubscribe",
          confirmButtonClass: "btn-confirm-unsubscribe",
          center: true,
          showClose: false,
          type: "warning",
        }
      ).catch((err) => err); //用catch来捕获错误消息
      if ("confirm" === confirmRes) {
        //用户点击了确认
        this.passCreateApproval();
      }
    },
    //注册审批通过 +-+ ✔
    passCreateApproval() {
      this.getCurrentTime();
      let data = {
        oprtId: this.userId,
        time: this.getTime,
        userId: this.detailsData1.userId,
      };
      let body = JSON.stringify(data);
      // axios
      approveRegister(body)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.change();
            console.log("成功");
            this.$message({
              type: "success",
              message: "审批成功",
            });
          } else console.log("失败");
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "注册审批失败",
          });
          console.log(e);
        });
    },
    //注册账号审批驳回
    async showRejectCreateApproval(index, rows) {
      index = (this.currentPage5 - 1) * this.pageSize + index;
      this.detailsData1 = rows[index];
      const url = require("@/assets/image/manage/warn.png");
      const confirmRes = await this.$confirm(
        "<img src=" +
          url +
          `><p style="margin-top:60px;">您确认要<span style="color:#D9001B">驳回</span>${this.detailsData1.userId}号 ${this.detailsData1.userName}的部门认证申请吗？</p>`,
        "",
        {
          dangerouslyUseHTMLString: true,
          customClass: "messageBox-unsubscribe",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-cancel-unsubscribe",
          confirmButtonClass: "btn-confirm-unsubscribe",
          center: true,
          showClose: false,
          type: "warning",
        }
      ).catch((err) => err); //用catch来捕获错误消息
      if ("confirm" === confirmRes) {
        //用户点击了确认
        this.rejectCreateApproval();
      }
    },
    //注册审批驳回 +-+
    rejectCreateApproval() {
      // let data = new FormData();
      // data.append("userId", this.detailsData1.userId);
      // var options = {
      //   // 设置axios的参数
      //   url: "C:/Users/86173/Desktop",
      //   data: data,
      //   method: "post",
      //   headers: {
      //     "Content-Type": "multipart/form-data",
      //   },
      // };
      // this.axios(options)
      //   .then((res) => {
      //     let value = res.data.success;
      //     if (value == 1) {
      //     }
      //   })
      //   .catch((e) => {
      //     alert("失败");
      //     console.log(e);
      //   }); // 发送请求
    },
    //重置密码审批驳回
    async showRejectResetApproval(index, rows) {
      index = (this.currentPage6 - 1) * this.pageSize + index;
      this.detailsData1 = rows[index];
      const url = require("@/assets/image/manage/warn.png");
      const confirmRes = await this.$confirm(
        "<img src=" +
          url +
          `><p style="margin-top:60px;">您确认要<span style="color:#D9001B">驳回</span>${this.detailsData1.user.userId}号 ${this.detailsData1.user.userName}的重置密码申请吗？</p>`,
        "",
        {
          dangerouslyUseHTMLString: true,
          customClass: "messageBox-unsubscribe",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-cancel-unsubscribe",
          confirmButtonClass: "btn-confirm-unsubscribe",
          center: true,
          showClose: false,
          type: "warning",
        }
      ).catch((err) => err); //用catch来捕获错误消息
      if ("confirm" === confirmRes) {
        //用户点击了确认
        this.rejectResetApproval();
      }
    },
    //重置审批驳回 +-+ ✔
    rejectResetApproval() {
      let data = {
        userId: this.detailsData1.userId,
        time: this.getTime,
        oprtId: this.userId,
      };
      let body = JSON.stringify(data);
      // axios
      rejectResetPwd(body)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.change();
            console.log("成功");
            this.$message({
              type: "success",
              message: "驳回成功",
            });
          } else console.log("失败");
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "驳回失败",
          });
          console.log(e);
        });
    },
    //点击详情显示下架人
    deleteDetails() {
      if (this.isHidden == 0) {
        this.isHidden = 1;
      } else {
        this.isHidden = 0;
      }
    },
    //获取时间
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      _this.getTime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
      console.log(_this.getTime);
    },
    //下拉切换
    imgClick() {
      if (this.img == "up") {
        this.img = "down";
        document.getElementById("radioBox").style.display = "none";
      } else {
        this.img = "up";
        document.getElementById("radioBox").style.display = "block";
      }
    },
    //定义切换方法
    tab(i) {
      this.number = i;
    },
    // 每页多少条
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 当前页
    handleCurrentChange1(val) {
      this.currentPage1 = val;
    },
    handleCurrentChange2(val) {
      this.currentPage2 = val;
    },
    handleCurrentChange3(val) {
      this.currentPage3 = val;
    },
    handleCurrentChange4(val) {
      this.currentPage4 = val;
    },
    handleCurrentChange5(val) {
      this.currentPage5 = val;
    },
    handleCurrentChange6(val) {
      this.currentPage6 = val;
    },
    //分页排序
    sortChange({ prop, order }) {
      this.fileData.sort(this.compare(prop, order));
    },
    sortChange1({ prop, order }) {
      this.detailsData2.sort(this.compare(prop, order));
    },
    sortChange2({ prop, order }) {
      this.userData.sort(this.compare(prop, order));
    },
    sortChange3({ prop, order }) {
      this.detailsData3.sort(this.compare(prop, order));
    },
    sortChange4({ prop, order }) {
      this.createData.sort(this.compare(prop, order));
    },
    sortChange5({ prop, order }) {
      this.resetData.sort(this.compare(prop, order));
    },
    compare(propertyName, sort) {
      return function (obj1, obj2) {
        var value1 = obj1[propertyName];
        var value2 = obj2[propertyName];
        if (typeof value1 === "string" && typeof value2 === "string") {
          const res = value1.localeCompare(value2, "zh");
          return sort === "ascending" ? res : -res;
        } else {
          if (value1 <= value2) {
            return sort === "ascending" ? -1 : 1;
          } else if (value1 > value2) {
            return sort === "ascending" ? 1 : -1;
          }
        }
      };
    },
  },
};
</script>
<style lang="less">
.delete-button {
  margin-top: 110px;
  margin-left: 30px;
  height: 40px;
  width: 130px;
  background-color: rgba(217, 0, 27, 1);
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
}
.changeType {
  .el-dialog {
    border: 1px solid rgba(121, 121, 121, 1);
    width: 580px;
    height: 500px;
    background-color: whitesmoke;
    box-shadow: none;
  }
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__footer {
    margin-top: 50px;
  }
}
.btn-cancel-change {
  margin-right: 100px !important;
  width: 140px !important;
  height: 40px !important;
  line-height: 5px !important;
  background-color: orange !important;
  color: white !important;
}
.btn-confirm-change {
  margin-right: 50px !important;
  width: 140px !important;
  height: 40px !important;
  line-height: 5px !important;
}
.backgroud-box {
  .el-table thead {
    color: black;
    font-weight: 500;
    font-size: 17px;
  }
}
.messageBox-reset {
  width: 800px !important;
  height: 500px !important;
  background-color: whitesmoke !important;
  .el-message-box__header {
    padding-top: 100px !important;
  }
  .el-message-box__status.el-icon-warning {
    display: none;
  }
  .el-message-box__message p {
    text-align: center;
    color: black;
    margin-top: 20px;
    font-size: 22px !important;
    font-weight: 400 !important;
  }
}
.btn-confirm-reset {
  margin-right: 20px !important;
  margin-top: 100px !important;
  width: 140px !important;
  height: 60px !important;
  line-height: 5px !important;
  font-size: 16px !important;
}
.el-icon-my-message {
  background: url("@/assets/image/manage/msg.png") center no-repeat;
  background-size: cover;
}
.el-icon-my-message:before {
  content: "替";
  font-size: 18px;
  visibility: hidden;
}
.el-icon-message {
  font-size: 18px;
}
.el-icon-message:before {
  content: "\e611";
}
.messageBox-unsubscribe {
  width: 400px !important;
  height: 400px !important;
  border: 4px solid orange !important;
  background-color: whitesmoke !important;
  .el-message-box__header {
    padding-top: 0 !important;
  }
  .el-message-box__status.el-icon-warning {
    display: none;
  }
  .el-message-box__message p {
    text-align: center;
    color: black;
    margin-top: 20px;
    font-size: 22px !important;
    font-weight: 400 !important;
  }
}
.btn-cancel-unsubscribe {
  float: right !important;
  margin-right: 30px !important;
  margin-top: 100px !important;
  width: 140px !important;
  height: 40px !important;
  line-height: 5px !important;
  background-color: orange !important;
  color: white !important;
  font-size: 16px !important;
}
.btn-confirm-unsubscribe {
  margin-right: 20px !important;
  margin-top: 100px !important;
  width: 140px !important;
  height: 40px !important;
  line-height: 5px !important;
  font-size: 16px !important;
}
.deleteFile {
  .el-dialog {
    border: 4px solid orange;
    width: 900px;
    height: 600px;
    background-color: whitesmoke;
  }
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__footer {
    margin-top: 220px;
  }
}
.btn-cancel-delete {
  float: right !important;
  margin-right: 180px !important;
  margin-top: 70px !important;
  width: 120px !important;
  height: 40px !important;
  line-height: 5px !important;
  background-color: orange !important;
  color: white !important;
}
.btn-confirm-delete {
  margin-right: 240px !important;
  margin-top: 70px !important;
  width: 120px !important;
  height: 40px !important;
  line-height: 5px !important;
}
.my-pagination {
  margin-top: 260px;
  margin-left: 670px;
  .el-pagination .btn-next,
  .el-pagination .btn-prev {
    width: 100px;
    height: 29px;
    background: rgba(22, 155, 213, 1) !important;
    color: #fff !important;
    border: none;
    border-radius: 5px;
  }
  .el-pagination .btn-next {
    margin-left: 20px;
  }
}
.selectboxBody {
  .el-radio {
    width: 100px;
    height: 20px;
    margin-left: 20px;
    margin-top: 12px;
    font-size: 18px;
    font-weight: bold;
    color: #000;
  }
  .el-radio__label {
    font-size: 18px;
  }
  .el-radio__inner {
    border: 1px solid black;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;
  }
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #fff;
    background: #fff;
    border: 1px solid #409eff;
  }
  .el-radio__inner::after {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #409eff;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.15s ease-in;
  }
}
</style>
<style lang="less" scoped>
.selectBox-change {
  font-weight: 700;
  font-style: normal;
  font-size: 25px;
  color: #333333;
}
.unsubscribe-btn {
  width: 136px;
  height: 52px;
  margin-left: 350px;
  background-color: rgba(217, 0, 27, 1);
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 6px;
}
.reset-btn {
  width: 136px;
  height: 52px;
  background-color: rgba(255, 179, 84, 1);
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 6px;
}
.change-btn {
  width: 200px;
  height: 52px;
  background-color: rgba(0, 178, 129, 1);
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 6px;
}
.t {
  border: 2px gray solid;
  border-spacing: 0px; //单元格间距为0px
  border-collapse: collapse; //=改为合并
  table-layout: fixed;
}
.t td {
  border: 1px gray solid;
  max-width: 140px;
  height: 50px;
  white-space: nowrap; //规定文本不换行
  overflow: hidden; //关闭滚动条
  text-overflow: ellipsis; //溢出文字显示为省略号
}
.t th {
  border: 1px gray solid;
  border-top: 2px black solid;
  border-bottom: 2px black solid;
  width: 140px;
  height: 50px;
}
.t1 {
  border: 1px gray solid;
  border-spacing: 0px; //单元格间距为0px
  border-collapse: collapse; //=改为合并
}
.t1 td {
  border: 1px gray solid;
  width: 160px;
  height: 60px;
}
.t1 th {
  border: 1px gray solid;
  width: 160px;
  height: 60px;
  color: #000;
}
.browseBody {
  position: absolute;
  float: left;
  margin-left: 150px;
  width: 1050px;
  height: 550px;
}
.downloadBody {
  position: absolute;
  float: left;
  margin-left: 150px;
  width: 1050px;
  height: 550px;
}
.font-css {
  width: 50px;
  height: 40px;
  line-height: 45px;
  font-size: 20px;
  font-weight: bold;
  float: left;
  margin: 0 auto;
  margin-left: 5px;
}
.selectboxTitle {
  border: 1px solid gray;
  width: 150px;
  height: 40px;
  float: left;
}
.selectboxBody {
  display: none;
  position: absolute;
  float: left;
  margin-top: 40px;
  border: 1px solid gray;
  width: 150px;
  height: 80px;
  font-weight: bold;
}
.fileTable {
  width: 1000px;
  height: 400px;
  margin: 0 auto;
  margin-top: 10px;
}
.fileTable1 {
  width: 600px;
  height: 300px;
  float: left;
}
.fileTable2 {
  width: 1080px;
  height: 400px;
  margin: 0 auto;
}
.input-search {
  margin-left: 60px;
  border: none;
  width: 265px;
  outline: medium;
}
.searchButton {
  width: 40px;
  height: 30px;
  color: #169bd5;
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  float: right;
  margin: auto;
  margin-left: 370px;
}
.searchButton1 {
  width: 40px;
  height: 30px;
  color: #169bd5;
  font-weight: bold;
  font-size: 20px;
  position: absolute;
  float: right;
  margin: auto;
  margin-left: 310px;
}
.searchIcon {
  height: 30px;
  width: 30px;
  position: absolute;
  margin: auto;
  margin-top: 5px;
  margin-left: 20px;
}
.searchWrap {
  display: flex;
  border: 1px solid black;
  border-radius: 30px;
  height: 40px;
  line-height: 40px;
  width: 430px;
  text-align: center;
  margin: 0 auto;
  margin-top: 30px;
}
.searchWrap1 {
  display: flex;
  border: 1px solid black;
  border-radius: 30px;
  height: 40px;
  line-height: 40px;
  width: 370px;
  text-align: center;
  position: absolute;
  margin-top: 20px;
  margin-left: 650px;
}
.left-tab-button {
  position: absolute;
  height: 50px;
  width: 150px;
  margin-top: 50px;
  background-color: white;
  font-size: 18px;
  border: 1px solid gray;
}
.left-tab-buttons {
  position: absolute;
  height: 50px;
  width: 150px;
  margin-top: 50px;
  background-color: rgb(0, 178, 129);
  font-size: 22px;
  font-weight: bold;
  border: 1px solid gray;
}
.right-tab-button {
  position: absolute;
  height: 50px;
  width: 150px;
  margin-top: 50px;
  margin-left: 150px;
  background-color: white;
  font-size: 18px;
  border: 1px solid gray;
}
.right-tab-buttons {
  position: absolute;
  height: 50px;
  width: 150px;
  margin-top: 50px;
  margin-left: 150px;
  background-color: rgb(0, 178, 129);
  font-size: 22px;
  font-weight: bold;
  border: 1px solid gray;
}
.backgroud-box {
  margin-top: 100px;
  display: inline-block;
  text-align: center;
  height: 550px;
  width: 1200px;
  background-color: white;
}
.building {
  background: url("@/assets/image/manage/background.png");
  background-size: 100% 100%;
}
</style>
